<!DOCTYPE HTML>
<html lang="en">

<!-- meta names -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="sound button mengabut">
    <meta author="thoriq" content="sore sore ngegabut">
    <link rel="stylesheet" type="text/css" href="./normalize.css">
    <link rel="stylesheet" type="text/css" href="./nut-styles.css">
    <title>Sound Button</title>
</head>
<body>
    <!-- the glory button -->
    <div class="keys">
        <div data-key="65" class="key">
          <kbd>A</kbd>
          <span class="sound">Nut</span>
        </div>
        <div data-key="83" class="key">
          <kbd>S</kbd>
          <span class="sound">boom</span>
        </div>
        <div data-key="68" class="key">
          <kbd>D</kbd>
          <span class="sound">moan</span>
        </div>
        <div data-key="70" class="key">
          <kbd>F</kbd>
          <span class="sound">baka(delay)</span>
        </div>
        <div data-key="71" class="key">
          <kbd>G</kbd>
          <span class="sound">ara ara</span>
        </div>
        <div data-key="72" class="key">
          <kbd>H</kbd>
          <span class="sound">nico2 ni</span>
        </div>
        <div data-key="74" class="key">
          <kbd>J</kbd>
          <span class="sound">Yah...</span>
        </div>
      </div>
      <div class="keys2">
        <div data-key="75" class="key">
          <kbd>K</kbd>
          <span class="sound">poi</span>
        </div>
        <div data-key="76" class="key">
          <kbd>L</kbd>
          <span class="sound">puffer-fish</span>
        </div>
        <div data-key="90" class="key">
          <kbd>Z</kbd>
          <span class="sound">bruh</span>
        </div>
        <div data-key="88" class="key">
          <kbd>X</kbd>
          <span class="sound">qt with oni</span>
        </div>
        <div data-key="67" class="key">
          <kbd>C</kbd>
          <span class="sound">elevator</span>
        </div>
        <div data-key="86" class="key">
          <kbd>V</kbd>
          <span class="sound">sexymusic</span>
        </div>
        <div data-key="66" class="key">
          <kbd>B</kbd>
          <span class="sound">yeet</span>
        </div>
        <div data-key="78" class="key">
          <kbd>N</kbd>
          <span class="sound">SUCC</span>
        </div>
        <div data-key="77" class="key">
          <kbd>M</kbd>
          <span class="sound">Empty</span>
          </div>
      </div>
    

    <!--  
 	sauce audio files
        
       default (us) keyboard layout   
    -->
        <audio data-key="65" src="sounds/nut.mp3"></audio>
        <audio data-key="83" src="sounds/vine-boom.mp3"></audio>
        <audio data-key="68" src="sounds/cute-moan-2-mp3.mp3"></audio>
        <audio data-key="70" src="sounds/baka.mp3"></audio>
        <audio data-key="71" src="sounds/lisa_ara_ara_normalized_lGdXcjK.mp3"></audio>
        <audio data-key="72" src="sounds/niconiconilovesyou-3_cutted.mp3"></audio>
        <audio data-key="74" src="sounds/yah.mp3"></audio>
        <audio data-key="75" src="sounds/poi.mp3"></audio>
        <audio data-key="76" src="sounds/aaughmp3.mp3"></audio>
        <audio data-key="90" src="sounds/bruh.mp3"></audio>
        <audio data-key="88" src="sounds/qualitytimewithonichan.mp3"></audio>
        <audio data-key="67" src="sounds/musique-dascenseur-mp3cut.mp3"></audio>
        <audio data-key="86" src="sounds/sexymusic.mp3"></audio>
        <audio data-key="66" src="sounds/yeet.mp3"></audio>
        <audio data-key="78" src="sounds/succ.mp3"></audio>
        <audio data-key="77" src="sounds/"></audio>

<!-- running scripts -->	
<script src="./moan.js"></script>
</body>
</html>
